<template>
    <div class="RiskDetail">
        <div class="top">
            <h4>隐患详情</h4>
            <button  @click="goBack">
                <i class="el-icon-refresh-right"></i>
                返回
            </button>
        </div>
        <p>基本信息</p>
        <hr>
        <el-row>
            <el-col :span="8">隐患标题：{{detail.risksName}}</el-col>
            <el-col :span="8">隐患等级：{{detail.risksLevel}}</el-col>
            <el-col :span="8">隐患类别：{{detail.risksType}}</el-col>
        </el-row>
        <el-row>
            <el-col :span="8">组织/建筑：{{detail.department}}</el-col>
            <el-col :span="8">详细位置：{{detail.location}}</el-col>
            <el-col :span="8">隐患照片：<img src="" alt="">11</el-col>
        </el-row>

        <div style="font-size: 14px">隐患整改进度</div>
        <hr>
       <keep-alive>
           <div class="step-box" style="height: 300px;">
               <el-steps direction="vertical" :active="this.progress.length" :space=100>
                   <el-step>
                       <template v-slot:description v-if="!progress[0]">
                           <div class="describe-ABox">
                               <span>待整改…</span>
                               <el-button @click="next">分配任务</el-button>
                           </div>
                       </template>
                       <template v-slot:description v-else>
                           <div class="describe-BBox">
                               <div>已分配</div>
                               <div>分配时间：{{progress[0].reporttime}}</div>
                               <div>责任人：{{progress[0].name}}</div>
                               <div>任务描述：设备故障维修</div>
                               <div>现场图片</div>
                           </div>
                       </template>
                   </el-step>

                   <el-step v-if="progress[0]">
                       <template v-slot:description v-if="!progress[1]">
                           <div class="describe-ABox">
                               <span>整改中...</span>
                               <el-button @click="rectification">整改完成</el-button>
                           </div>
                       </template>
                       <template v-slot:description v-else>
                           <div class="describe-BBox">
                               <div>整改完成</div>
                               <div>分配时间：{{progress[1].reporttime}}</div>
                               <div>责任人：{{progress[1].name}}</div>
                               <div>任务描述：设备故障维修</div>
                               <div>现场图片</div>
                           </div>
                       </template>
                   </el-step>

                   <el-step v-if="progress[1]">
                       <template v-slot:description v-if="!progress[2]">
                           <div class="describe-ABox">
                               <span>验收审核...</span>
                               <el-button @click="next">分配任务</el-button>
                           </div>
                       </template>
                       <template v-slot:description v-else>
                           <div class="describe-BBox">
                               <div>验收通过</div>
                               <div>分配时间：{{progress[2].reporttime}}</div>
                               <div>责任人：{{progress[2].name}}</div>
                               <div>任务描述：设备故障维修</div>
                               <div>现场图片</div>
                           </div>
                       </template>
                   </el-step>
               </el-steps>
           </div>
       </keep-alive>

        <!-- 分配任务模态框 -->
        <el-dialog title="分配整改任务" :visible.sync="dialogFormVisible" class="report-box">
            <el-form
                :model="reportForm"
                label-position="top"
                style="text-align: left"
            >
                <el-form-item label="责任人" :label-width="formLabelWidth">
                    <el-input type="text" v-model="reportForm.people"></el-input>
                </el-form-item>
                <el-form-item label="任务描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="reportForm.describe" ></el-input>
                </el-form-item>
                <el-form-item label="上传隐患照片" :label-width="formLabelWidth">
                    <el-input type="file" v-model="reportForm.img" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="isNext">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios  from "axios";
export default {
    name: "RiskDetail",
    data() {
        return {
            detail:{},
            dialogFormVisible:false,
            reportForm:{
                people: '',
                describe: '',
                img: ''
            },
            formLabelWidth: '120px',
            progress: [],
            assignedData: {
                "name": "张三",
                "reporttime": "2021-06-18",
            },
            completedData: {
                "name": "李四",
                "reporttime": "2021-09-23",
            },
            checkedData: {
                "name": "小鹏",
                "reporttime": "2021-12-31",
            }
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        // 初始化
        init(){
           this.getStatus();
           let temp = new URLSearchParams(location.search);
           let id = temp.get('id')
            this.$axios({
                url:'/risks',
                params:{
                    id:id
                }
            }).then(({data}) => {
                if(data.code === '200'){
                    this.detail = data.data
                }
            })
        },
        requestRisk(status) {
            const temp = new URLSearchParams(location.search);
            const id = temp.get('id')
            this.$axios({
                url:'/riskhandles',
                method:'put',
                data: {
                    "handleStatus": status,
                    "handleTime": "",
                    "id": id,
                    "image": "",
                    "name": "",
                    "taskDesc": ""
                }
            });
        },
        getStatus() {
            this.progress = [];
            const temp = new URLSearchParams(location.search);
            const status = temp.get('status');
            switch (status) {
                case '已分配': {
                    this.progress.push(this.assignedData);
                    break;
                }
                case '整改中': {
                    this.progress.push(this.assignedData);
                    break;
                }
                case "整改完成": {
                    this.progress.push(this.assignedData, this.completedData);
                    break;
                }
                case "验收通过": {
                    this.progress.push(this.assignedData, this.completedData, this.checkedData);
                    break;
                }
            }
        },
        // 返回上一页
        goBack(){
            this.$router.go(-1);
        },
        next() {
            this.dialogFormVisible = true;
        },
        // 完成整改
        rectification(){
            this.requestRisk("已分配");
            this.progress.push(this.completedData);
        },
        // 确认分配
        isNext(){
            this.dialogFormVisible = false;
            this.requestRisk("整改完成");
            this.progress.push(this.checkedData);
        }
    }
}
</script>

<style lang="less" scoped>
a {
    text-decoration: none;
    color: #3a4049;
}
 /deep/.el-step__description {
  padding-right: 0;
}
.RiskDetail {
    text-align: left;
    .top {
        display: flex;
        align-items: center;
        button {
            margin-left: 100px;
            border: 1px solid #F2F2F2;
            background-color: #FFF;
            padding: 6px 12px;
            i{
                color: #0A92FA;
                font-weight: bold;
                margin-right: 10px;
            }
        }
    }
    p {
        font-size: 14px;
        margin-top: 30px;
    }
    .el-row {
        font-size: 14px;
        margin-bottom: 20px;
        margin-top: 30px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .step-box {
        margin: 40px;
    }
    .describe-ABox {
        color: black;
        font-size: 14px;
        background-color: #E7F4FF;
        height: 60px;
        line-height: 60px;
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .describe-BBox {
        color: black;
        font-size: 14px;
        height: 60px;
        line-height: 60px;
        background-color: #FFF;
        border: 1px solid green;
        border-radius: 4px;
        display: flex;
        justify-content: space-around;
    }
}
</style>